<template>

	<view class="">
		<!-- 顶部tab -->
		<view class="top">
			<u-icon name="map" size="25" color="white"></u-icon>
			<image src="../../static/image/logo.png"></image>
			<u-search shape="square"></u-search>
			<u-icon name="order" size="30" color="white"></u-icon>
		</view>
		<!-- 导航 -->
		<view class="tabs">
			<u-tabs :list="navList" @click="click" :scrollable="true" keyName="catename"></u-tabs>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" :autoplay="true" interval="3000" :circular="true" height="200">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperList" :key="item.id" keyName='item.img'>
						<image :src="item.img"></image>
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 导航 -->
		<view class="grid">
			<u-grid :border="false" @click="click" col="5">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 限时抢购 -->
		<view class="box">
			<view class="boxLeft">
				<image src="../../static/image/图1.png"></image>
			</view>
			<view class="boxRight">
				<view class="right1">
					<image src="../../static/image/图2.png"></image>
				</view>
				<view class="right2">
					<image src="../../static/image/图3.png"></image>
				</view>
			</view>
		</view>
		<!-- 底部热推 -->
		<view class="bot">
			<u-subsection :list="list5" :current="curNow" @change="sectionChange" fontSize=20
				activeColor="orange"></u-subsection>
		</view>
		<!-- 底部热推数据 -->
		<view class="botBox" v-for="(item,index) in botList1[curNow].content" :key="item.id">
			<view class="botBox1">
				<image :src="$baseUrl + item.img"></image>
			</view>
			<view class="botBox2">
				<view>{{item.goodsname}}</view>
				<view class="nowPrice">现价格：{{item.price}}</view>
				<view class="oldPrice">原价格：{{item.market_price }}</view>
				<button @click="goDetail(item.id)">立即抢购</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 轮播图
				swiperList: [],
				// 底部热推数据
				botList1: [{
					content: []
				}],
				value1: 0,
				navList: [],
				list5: ['热门推荐', '上新推荐', '所有商品'],
				curNow: 0,
				baseList: [{
						name: 'clock-fill',
						title: '限时秒杀'
					},
					{
						name: 'integral-fill',
						title: '畅销商品'
					},
					{
						name: 'level',
						title: '品质大牌'
					},
					{
						name: 'gift-fill',
						title: '小U自营'
					},
					{
						name: 'car-fill',
						title: '积分商城'
					},
				]
			}
		},
		onLoad() {
			this.getNav()
			// 轮播图数据
			this.getBanner()
			// 底部热推数据
			this.getBotTab()
		},
		methods: {
			click(index) {
				console.log('click1', index);
				// idnex = this.current
			},
			sectionChange(index) {
				this.curNow = index;
			},
			// 请求导航
			getNav() {
				this.$http({
					url: '/api/getcate'
				}).then((res) => {
					// console.log(res.data.list)
					this.navList = res.data.list
				})
			},
			// 请求轮播图
			getBanner() {
				this.$http({
					url: '/api/getbanner'
				}).then((res) => {
					// console.log(res)
					this.swiperList = res.data.list.map(item => {
						return item = this.$baseUrl + item.img
					})
					// console.log(this.swiperList)
				})
			},
			// 请求底部热推
			async getBotTab(index) {
				let res = await this.$http({
					url: '/api/gethortgoods'
				})
				this.botList1 = res.data.list
				// console.log(this.botList1[this.curNow].content)
				// this.$http({
				// 	url: '/api/gethortgoods'
				// }).then((res) => {
				// 	this.botList1 = res.data.list
				// 	console.log(this.botList1)
				// })
			},
			// 点击去详情页
			goDetail(id) {
				// console.log(e)
				// let id = this.botList1[this.curNow].content
				// console.log(id);
				// this.$http({
				// 	url: '/api/getgoodsinfo',
				// 	method: 'GET',
				// 	data: {
				// 		id
				// 	}
				// })
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id,
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";

	.top image {
		width: 300rpx;
		height: 60rpx;

	}

	.top {
		display: flex;
		justify-content: space-evenly;
		background-color: #ff6604;
	}

	.tabs {
		background-color: #ff6040;
	}

	.boxLeft image {
		margin-left: 10rpx;
		margin-right: 20rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: darkgray;
	}

	.boxRight .right1 image {
		width: 310rpx;
		height: 250rpx;
		background-color: pink;
		margin-bottom: 10rpx;
	}

	.boxRight .right2 image {
		width: 310rpx;
		height: 110rpx;
		background-color: plum;
	}

	.box {
		margin-top: 30rpx;
		display: flex;
	}

	.botBox {
		border: 1rpx solid red;
		display: flex;

	}

	.botBox image {
		width: 300rpx;
		height: 300rpx;
		margin: 50rpx;
	}

	.botBox .botBox2 {
		margin-top: 50rpx;
		line-height: 50rpx;
	}

	.nowPrice {
		color: red
	}

	.oldPrice {
		color: darkgray
	}

	.botBox button {
		background-color: orange;
	}
</style>